<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: red;
            height: 200px;
            width: 200px;
        }
        #d2{
            background-color: green;
            height: 200px;
            width: 200px;
        }

        .dd1{
            background-color: yellow;
            height: 40px;
            width: 40px;
        }
        .dd2{
            background-color: pink;
            height: 40px;
            width: 40px;
        }

    </style>
</head>
<body>



<div id="d1">
    <div class="dd1"></div>
</div>
<div id="d2">
    <div class="dd2"></div>
</div>

用户名:<input type="text" id="username">


<br>

<!--<select name="" id="s1">-->
<!--    <option value="1">上海</option>-->
<!--    <option value="2">深圳</option>-->
<!--    <option value="3">贵州</option>-->
<!--</select>-->

<input type="text" id="xxx">

</body>
<script src="jquery.js"></script>
<script>
    // 绑定事件的方式1
    // $("#d1").click(function () {
    //     $(this).css('background-color','green');
    // })

    // 方式2
    // $('#d1').on('click',function () {
    //     $(this).css('background-color','green');
    // });
    //
    // // 获取光标触发的事件
    // $('#username').focus(function () {
    //     $(this).css('background-color','green');
    // });
    // // 失去光标触发的事件
    // $('#username').blur(function () {
    //     $(this).css('background-color','white');
    // });
    // // 域内容发生变化触发的事件,一般用于select标签
    // $('#s1').change(function () {
    //      // $('#d1').css('background-color','black');
    //     console.log('xxxxx')
    //
    // });

    // $('#xxx').change(function () {
    //     console.log($(this).val());
    // })

    // 输入内容实时触发的事件,input事件只能on绑定
    // $('#xxx').on('input',function () {
    //     console.log($(this).val());
    // });
    //
    // //绑定多个事件 事件名称空格间隔
    // $('#xxx').on('input blur',function () {
    //     console.log($(this).val());
    // })


    // 鼠标进入触发的事件
    // $('#d1').mouseenter(function () {
    //     $(this).css('background-color','green');
    // });
    // // 鼠标离开触发的事件
    // $('#d1').mouseout(function () {
    //     $(this).css('background-color','red');
    // });

    // hover事件 鼠标进进出出的事件
    // $('#d1').hover(
    //     // 鼠标进入
    //     function () {
    //         $(this).css('background-color','green');
    //     },
    //     // 鼠标离开
    //     function () {
    //         $(this).css('background-color','red');
    //     }
    // );


    // $('#d1').mouseenter(function () {
    //     console.log('xxx');
    // });
    // $('#d2').mouseover(function () {
    //     console.log('ooo');
    // });


    // $(window).keydown(function (e) {
    //     console.log(e.keyCode);
    //
    // });
    // $(window).keyup(function (e) {
    //     console.log(e.keyCode);
    //
    // });



</script>

</html>